const uploadButton = document.querySelector(".upload-button");
const progressBar = document.querySelector(".upload-button .progress-bar");

//假设上传时间为5秒
const uploadTime = 5000;

uploadButton.addEventListener("click", () => {
    uploadButton.classList.remove("uploaded");
    uploadButton.classList.add("uploading");
    //假设5秒后上传完成
    setTimeout(() => {
        uploadButton.classList.replace("uploading", "uploaded");
    }, uploadTime);

    let start = null;
    function grow(timestamp){
        if (!start) start = timestamp;
        let progress = timestamp - start;
        progressBar.style.width = `${
            Math.min(progress / uploadTime, 1) * 100
        }%`;
        // 如果上传未完成，继续执行此函数，递归循环
        if (progress < uploadTime) {
            window.requestAnimationFrame(grow);
        }
    }
    window.requestAnimationFrame(grow);
});
